<template>

    <el-container>
        <el-header style="padding: 0px;">
            <el-row :gutter="15">
                <el-col :span="6" ><div class="grid-content">
                    <el-input v-model="searchParam.siteindex" placeholder="站点名称/站点首页"></el-input>
                </div></el-col>

                <el-col :span="6"><div class="grid-content">
                    <el-button type="primary" icon="el-icon-search" v-on:click="search">查询</el-button>
                </div></el-col>
                <el-button type="success" style="float:right; margin-right:10px;" @click="showAddForm" round>✚添加站点</el-button>
                <!--<el-button type="success" style="float:right; margin-right:10px;" @click="dialogFormVisible  = true" round>✚添加站点</el-button>-->
            </el-row>

           </el-header>
        <el-main style="padding: 0px;">


            <el-table
                    v-loading="loading"
                    stripe
                    :data="tableData"
                    style="width:100%"
                    border
                    @selection-change="handleSelectionChange"
                    @row-click="handleclick"
                    :row-class-name = "tableRowClassName"
            >
                <el-table-column label="序号" type="index"  width="50"></el-table-column>
                <el-table-column prop="siteName"  label="站点名称"></el-table-column>
                <el-table-column prop="siteHome"  label="站点首页"></el-table-column>

                <!--<el-table-column label="站点首页" width="400">
                    <template scope="scope">
                        <span v-if="!scope.row.editFlag">{{ scope.row.siteHome }}</span>
                        <span v-if="scope.row.editFlag" class="cell-edit-input"><el-input v-model="inputColumn1" style="width: 80%"></el-input>
                            <el-button type="text" size="small"  @click.native.prevent="bcRow(scope.$index, tableData)">保存</el-button>
                            <el-button type="text" size="small"  @click.native.prevent="qxRow(scope.$index, tableData)">取消</el-button>
                        </span>
                    </template>
                </el-table-column>-->

                <el-table-column prop="pubtime" label="创建日期" sortable ></el-table-column>



                <el-table-column fixed="right" label="操作" min-width="100px;">
                    <template slot-scope="scope">
                        <el-button @click="showGetCode(scope.row)" type="text">统计代码</el-button>
                        <!--<el-button type="text"   @click.native.prevent="editRow(scope.$index, tableData)">修改</el-button>-->

                        <el-button type="text"   @click="showEditForm(scope.row.id)">修改</el-button>
                        <el-button type="text" @click="showDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>



            </el-table>

            <div align="center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>

        </el-main>



        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="网站id" prop="siteid" style="display: none;">
                    <el-input v-model="ruleForm.siteid" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="网站名称" prop="sitename">
                    <el-input v-model="ruleForm.sitename" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="网站主页" prop="sitehome">
                    <el-input v-model="ruleForm.sitehome" style="width: 400px"></el-input>
                </el-form-item>

                <el-form-item label="网站类型" prop="sitetype">
                    <el-select v-model="ruleForm.sitetype" placeholder="请选择网站类型" style="width: 400px">
                        <el-option value="">请选择网站类型</el-option>
                        <el-option value="娱乐类">娱乐类</el-option>
                        <el-option value="IT网络">IT网络</el-option>
                        <el-option value="教育人才">教育人才</el-option>
                        <el-option value="医疗医学">医疗医学</el-option>
                        <el-option value="百姓生活">百姓生活</el-option>
                        <el-option value="经济商贸">经济商贸</el-option>
                        <el-option value="行业类">行业类</el-option>
                        <el-option value="论坛博客">论坛博客</el-option>
                        <el-option value="其它类">其它类</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="网站简介" prop="sitesummary">
                    <el-input type="textarea" v-model="ruleForm.sitesummary" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>


        <el-dialog title="统计代码" :visible.sync="dialogCodeVisible">
            <el-alert show-icon title="请复制以下代码，将其粘贴到您网站所有页面的</body>前，添加成功后立即开始统计" type="info">
            </el-alert>
            HTML代码
            <el-input type="textarea" :rows="2" v-model="codetext" ></el-input>

        </el-dialog>
    </el-container>



</template>


<script>
    import Cookies from 'js-cookie';
    import {getBaseUrl} from '../../../static/config/axios.conf' //注意路径


    export default {
        name: 'siteList',
        components: {

        },
        data() {
            return {
                //表格当前页数据
                tableData: [],
                //多选数组
                multipleSelection: [],
                //下拉菜单选项
                select: '',
                //默认每页数据量
                pagesize: 10,
                //默认高亮行数据id
                highlightId: -1,
                //当前页码
                currentPage: 1,
                //查询的页码
                start: 1,
                //默认数据总数
                totalCount: 0,
                userid:'',
                searchParam: {
                    siteindex:'',

                },
                codetext:'',
                inputColumn1:'',
                dialogTitle:'添加站点',
                dialogFormVisible: false,
                dialogCodeVisible: false,
                ruleForm: {
                    siteid:'',
                    sitename: '',
                    sitehome: '',
                    sitetype: '',
                    sitesummary: ''
                },
                rules: {
                    sitename: [
                        { required: true, message: '请输入网站名称', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    sitehome: [
                        { required: true, message: '请输入网站首页', trigger: 'blur' }
                    ],
                    sitetype: [
                        { required: true, message: '请选择网站类型', trigger: 'change' }
                    ],
                    sitesummary: []
                }
            }//return
        },//data
        methods: {
            //加载table数据
            loadData: function(pageNum, pageSize){
                let params =new URLSearchParams();
                params.append("siteindex",this.searchParam.siteindex);
                params.append("userid",this.userid);
                params.append("pageNum",pageNum);
                params.append("pageSize",pageSize);
                this.$axios.post('/site/getSiteListByPage',params).then((res)=> {
                    this.tableData = res.data.pagesdata;
                    this.totalCount = res.data.number;
                }).catch((error)=> {
                    console.log(error);
                });


            },
            //搜索
            search: function(){
                this.currentPage=1;
                this.loadData(this.currentPage, this.pagesize);
            },
            showEditForm:function(id){
                alert('123：'+id);
                //装载信息  打开弹出框
                this.dialogTitle='修改站点信息';
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",id);
                this.$axios.post('/site/getSiteInfo',params).then((res)=> {
                    let result = res.data.site;
                    this.ruleForm.siteid=result.id;
                    this.ruleForm.sitename=result.siteName;
                    this.ruleForm.sitehome=result.siteHome;
                    this.ruleForm.sitetype=result.siteType;
                    this.ruleForm.sitesummary=result.siteSummary;
                    this.dialogFormVisible=true;
                });

            },
            showAddForm:function(){
                this.ruleForm.siteid='';
                this.ruleForm.sitename='';
                this.ruleForm.sitehome='';
                this.ruleForm.sitetype='';
                this.ruleForm.sitesummary='';
                this.dialogTitle='添加站点';
                this.dialogFormVisible=true;
            },
            showDel:function(id){
                    this.$confirm('确认永久删除该站点, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let params =new URLSearchParams();
                        params.append("siteid",id);
                        this.$axios.post('/site/delSite',params).then((res)=> {
                            let result = res.data.result;
                            if(result>0){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }else{
                                this.$Message.error('删除失败，刷新页面重试');
                            }
                            this.currentPage=1;
                            this.loadData(this.currentPage, this.pagesize);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
            /*editRow(index, rows) {
                rows[index].editFlag=true;
                this.inputColumn1=rows[index].siteHome;
            },
            qxRow(index, rows) {
                rows[index].editFlag='';
                this.inputColumn1='';
            },
            bcRow(index, rows) {
                //保存后台
                 //把inputcolumn1的值赋给 rows[index].siteHome
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",rows[index].id);
                params.append("sitehome",this.ruleForm.sitehome);
                this.$axios.post('/site/editSite',params).then((res)=> {
                    let result = res.data.result;
                    if(result>0){
                        //修改成功
                        rows[index].editFlag=false;
                        rows[index].sitehome=this.inputColumn1;
                        this.inputColumn1='';
                    }
                });

            },*/
            //多选响应
            handleSelectionChange: function(val) {
                this.multipleSelection = val;
            },

            //点击行响应
            handleclick: function(row, event, column){
                this.highlightId = row.id;
            },

            //改变当前点击的行的class，高亮当前行
            tableRowClassName: function(row, index){
                if(row.id == this.highlightId)
                {
                    return 'info-row';
                }
            },

            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData(this.currentPage, this.pagesize);
            },

            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params =new URLSearchParams();
                        params.append("userid",this.userid);
                        params.append("siteid",this.ruleForm.siteid);
                        params.append("sitename",this.ruleForm.sitename);
                        params.append("sitehome",this.ruleForm.sitehome);
                        params.append("sitetype",this.ruleForm.sitetype);
                        params.append("sitesummary",this.ruleForm.sitesummary);
                        this.$axios.post('/site/saveSite',params).then((res)=> {
                            let result = res.data.result;
                            if(result>0){
                                //清空表单
                                //this.$refs[formName].resetFields();
                                this.dialogFormVisible = false;
                                this.resetForm('ruleForm');
                                this.$Message.success('操作成功');
                                this.currentPage=1;
                                this.loadData(this.currentPage, this.pagesize);

                            }
                        });

                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            showGetCode:function (row) {
                //获取统计代码
                this.dialogCodeVisible=true;
                let userid=this.userid;
                let siteid=row.id;
                alert(siteid+'_siteid_userid_'+userid);
                let url=getBaseUrl();
                url+='site/getCode/'+userid+'/'+siteid;
                this.codetext='\<script\>'+url+'\<\/script\>';
                this.codetext='\<script src="'+url+'\" language="JavaScript"\>\<\/script\>';


            }

        },mounted(){
            let userid = Cookies.get('xbsj_userid');
            this.userid = userid;

            this.loadData(this.currentPage, this.pagesize);

        },
    };


</script>

